<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动表格</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        table{
            width: 1100px;
            margin: 50px auto;
            border-spacing: 0;
            border-collapse: collapse;
            table-layout: fixed;
        }
        caption{
            font-size: 30px;
        }
        td{
            border: 1px solid #000;
            text-align: center;
            font-size: 20px;
        }
        button{
            padding: 5px 10px;
        }

        .fix_box{
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(116, 111, 112,.3);
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
        }
        .fb_con{
            width: 700px;
            background: #fff;
            margin: 200px auto;
        }
        .fb_con table{
            width: 700px;
        }
    </style>
</head>
<body>
    <button class="add">新增</button>
    <table>
        <caption>表格</caption>
        <thead>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>王晓明</td>
                <td>男</td>
                <td>19</td>
                <td>
                    <button class="toUp">向上移动</button>
                    <button class="toDown">向下移动</button>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>002</td>
                <td>王晓红</td>
                <td>女</td>
                <td>20</td>
                <td>
                    <button class="toUp">向上移动</button>
                    <button class="toDown">向下移动</button>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>003</td>
                <td>李晓明</td>
                <td>男</td>
                <td>29</td>
                <td>
                    <button class="toUp">向上移动</button>
                    <button class="toDown">向下移动</button>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>004</td>
                <td>李晓红</td>
                <td>女</td>
                <td>39</td>
                <td>
                    <button class="toUp">向上移动</button>
                    <button class="toDown">向下移动</button>
                    <button class="delete">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="fix_box">
        <div class="fb_con">
            <table>
                <thead>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text"></td>
                        <td><input type="text"></td>
                        <td><input type="text"></td>
                        <td><input type="text"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        /* 
            实现效果：
                1、点击上移和点击下移
                2、删除
                3、新增数据
        */
        var tbody = document.querySelector('tbody');
        var fixBox = document.querySelector('.fix_box');

        // 移动、删除
        document.onclick = function(e){

            var tr = e.target.parentNode.parentNode;
            // 1.上移：找到上一个兄弟节点并在其之前插入，然后移除该行
            if(e.target.className === 'toUp'){
                // 还能上移
                if(tr.previousElementSibling){
                    var newTr = tr.cloneNode(true);
                    tbody.insertBefore(newTr,tr.previousElementSibling);
                    tr.remove();
                }else{
                    alert('已经是第一行了')
                }
            }

            // 2.下移：找到下一个兄弟节点并复制，在原行之前插入，然后移除兄弟行
            if(e.target.className === 'toDown'){
                // 还能下移
                if(tr.nextElementSibling){
                    var newTr = tr.nextElementSibling.cloneNode(true);
                    tbody.insertBefore(newTr,tr);
                    tr.nextElementSibling.remove();
                }else{
                    alert('已经是最后一行了')
                }
            }

            // 3.删除
            if(e.target.className === 'delete'){
                e.target.parentNode.parentNode.remove();
            }

            // 4.新增
            if(e.target.className === 'add'){
                fixBox.style.display = 'block';
                alert('还没做完');
            }
        }
    </script>
</body>
</html>